<template>
  <div class="loading-wrap">
    <div class="message">数据加载中</div>
    <div class="doted"></div>
    <div class="doted"></div>
    <div class="doted"></div>
  </div>
</template>

<script>
export default {
  name: "Loading",
};
</script>

<style scoped lang="less">
.loading-wrap {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  height: 458px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
  .message {
    width: 40%;
    height: 20%;
    margin: 0 auto;
    margin-top: 100px;
    font-size: 30px;
    color: #fff;
    vertical-align: middle;
  }
  .doted{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      transform: translateY(0%);
    //   animation: loading .5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
      top: 120px;
      
  }
  .doted:nth-child(4){
      left: 560px;
      animation: loading 1s cubic-bezier(0.075, 0.82, 0.165, 1) .1s infinite;
  }
  .doted:nth-child(2){
      left: 590px;
      animation: loading 1s cubic-bezier(0.075, 0.82, 0.165, 1) .2s infinite;
  }
  .doted:nth-child(3){
      left: 620px;
      animation: loading 1s cubic-bezier(0.075, 0.82, 0.165, 1) .3s infinite;
  }
  @keyframes loading {
      from{
          transform: translateY(100%);
      }
      to{
          transform: translateY(0%);
      }
  }
}
</style>